<!DOCTYPE html>
<html>
<head>
	<title>实名认证 -- 快件e栈服务平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link href="css/normalize.css" type="text/css" rel="stylesheet" />
	<link href="css/common.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
	<script src="js/notice.js" type="text/javascript"></script>
	<script src="js/regexp.js" type="text/javascript"></script>
	<script src="js/jweixin-1.2.0.js" type="text/javascript"></script>
	<script src="layer/layer.js"></script>
	<style type="text/css">
		.content{
			overflow: hidden;
		}
		.userCheckCont{
			width: 100%;
		}
		.userInfoCont{
			overflow: hidden;
			padding: 40px 0px 20px;
			background-image: linear-gradient(to top,#1bb7c3,#f4f4f4);
			box-shadow: 0px 3px 3px #c1c1c1;
		}
		.userInfoCont  .userInfoIcon{
			width: 18%;
			margin: 0px auto 10px;
		}
		.userInfoCont  .nickName{
			font-size: 14px;
			text-align: center;
			font-weight: bold;
			color: #fff;
		}

		.solidCont{
			width: 200%;
			overflow: hidden;
		}
		.checkState{
			width: 50%;
			margin:30px 0px;
			float: left;
		}
		.checkState .stateIcon{
			width: 30px;
			margin: 0 auto;
		}
		.checkState .checkStateTxt{
			text-align: center;
			font-size: 14px;
			padding: 5px 0px;
			color: #333333;
			font-weight: bold;
			margin-bottom: 50px;
		}
		.checkState .checkBtn{
			width: 80%;
			line-height: 40px;
			margin: 5px auto;
			font-weight: bold;
			text-align: center;
			color: #20d6da;
			border: 2px solid #20d6da;
			border-radius: 20px;
		}
		.checkState .checkprompt{
			font-size: 14px;
			text-align: center;
			color: #888888;
			margin: 8px 0px 0px;
		}

		.infoCheckEditCont{
			width: 50%;
			float: left;
			padding-top: 20px;
			overflow:auto;
		}

		.submitBtn,.backBtn{
			width: 90%;
			margin: 0 auto 20px;
			text-align: center;
			line-height: 46px;
			border-radius: 23px;
			color: #20d6da;
			border: 2px solid #20d6da;
			font-weight: bolder;
		}

		#oldPhone{
			display: none;
		}

		/* userIdImg css */
		.userIdImgUpload{
			width: 90%;
			margin: 0 auto 20px;
			overflow: hidden;
		}
		.userIdImgUpload .userIdImgCont{
			width: 100%;
			overflow: hidden;
			border-radius: 8px;
			border: 1px solid #e1e1e1;
			background: #fff;
		}
		.userIdImgUpload .userIdImgCont img{
			width: 100%;
			display: block;
			margin: 0 auto;
		}
		.userIdImgUpload .userIdImgCont .userIdImgUploadDesc{
			margin: 0px;
			line-height: 30px;
			font-size: 14px;
			color: #999999;
			font-weight: bold;
			text-align: center;
		}


		.userUploadDesc{
			width: 90%;
			font-size: 14px; 
			color: #999999;
			margin: 0 auto 20px;
		}
		
		.imageCover{
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.8);
			display: none;
		}

	</style>
</head>
<body>
	<div class="content">
    
    <input id="timestamp" type="hidden" value="${timestamp}" />
	<input id="noncestr" type="hidden" value="${nonceStr}" />
	<input id="signature" type="hidden" value="${signature}" />
	<input id="appId" type="hidden" value="${appId}" />
	
	<div class="userCheckCont">
		<div class="userInfoCont">
			<div class="userInfoIcon">
				<img src="images/userInfoIcon.png" width="100%">
			</div>
			<div class="nickName">用户认证</div>
		</div>
	</div>
	
	<div class="solidCont" onblur="blur()">
		<div class="checkState">
			<div class="stateIcon">
				<img src="images/uncheckIcon.png" width="100%">
			</div>
			<div class="checkStateTxt">未认证</div>
			
			<!-- 按钮组 -->
			<div class="checkBtn userRegBtn">新用户认证</div>
			<div class="checkprompt">认证通过开启信息化校园快递</div>
		</div>

		<div class="infoCheckEditCont" id="newUserReg">
			<form>
				<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
				<input id="wxCode" type="hidden" value="${wxCode}" />
				<div class="userInputCont">
					<div class="inputTypeCont">
						<div class="inputTitle">姓名</div>
						<input type="text" id="name" class="commonInput" name="name" placeholder="请输入你的姓名...">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">手机</div>
						<input type="text" id="phone1" class="commonInput" autocomplete="off" name="phone" placeholder="请输入你的手机号码...">
					</div>
					<div class="inputTypeCont">
					<div class="inputTitle">身份证号</div>
					<input type="text" id="identifyCard" class="commonInput" name="identifyCard" placeholder="请输入你的身份证号">
				</div>
					<div class="inputTypeCont">
						<div class="inputTitle">密码</div>
						<input type="text" id="password" class="commonInput" name="password" placeholder="请输入你的密码">
					</div>
					<div class="inputTypeCont">
						<div class="inputTitle">短信</div>
						<input id="msg" type="text" class="verifiInput" autocomplete="off" placeholder="请输入验证码...">
<!--						<input type="text" id="msg" class="verifiInput" name="msg" placeholder="请输入验证码...">-->
<!--						<input type="button" class="verifiBtn" value="发送验证码">-->
						<input id="btnSendCode1" type="button" class="verifiBtn" class="btn btn-default" value="发送验证码" onclick="sendMessage1()">
					</div>

				</div>
			</form>
			<div id = "userRegSubmitBtn" class="submitBtn userRegSubmitBtn" onclick="binding()">确认提交</div>
			<div class="backBtn">点我返回</div>
		</div>
	</div>
	
	<div class="imageCover">
		<div class="coverCont">
			<img src="images/useridimage.jpg" width="100%">
		</div>
	</div>
</div>

<script type="text/javascript">

	var phoneReg = /(^1[3|4|5|6|7|8]\d{9}$)|(^09\d{8}$)/;
	var count = 10;
	var InterValObj1;
	var curCount1;
	function sendMessage1() {
		curCount1 = count;
		var userPhone = $.trim($('#phone1').val());
		if (!phoneReg.test(userPhone)) {
			alert(" 请输入有效的手机号码");
			return false;
		}

		$("#btnSendCode1").attr("disabled", "true");
		$("#btnSendCode1").val( + curCount1 + "秒再获取");
		InterValObj1 = window.setInterval(SetRemainTime1, 1000);
		var windowId = layer.load();
		$.getJSON("/wx/sendUserSms.do",{userPhone:userPhone},function (data) {
			//{status:0/1,result:"成功/失败"}
			layer.close(windowId);
			layer.msg(data.result);
		});
	}

	function SetRemainTime1() {
		if (curCount1 == 0) {
			window.clearInterval(InterValObj1);
			$("#btnSendCode1").removeAttr("disabled");
			$("#btnSendCode1").val("重新发送");
		}else{
			curCount1--;
			$("#btnSendCode1").val( + curCount1 + "秒再获取");
		}
	}

	/*$(function () {
		$("#userRegSubmitBtn").click(function () {
			var windowId = layer.load();
			var name = $("#name").val();
			var phone = $("#phone").val();
			var identifyCard = $("#identifyCard").val();
			var password = $("#password").val();
			//可以在这里就用ajax从服务端获取发送的短信验证码,并与输入的验证码是否一致,不一致就不能提交认证
			var code = $("#msg").val();//验证码

			$.post("/wx/userIdentification.do",{
				username:name,
				userPhone:phone,
				identifyCard:identifyCard,
				password:password,
				code:code
			},function (data) {
				layer.close(windowId);
				layer.msg(data.result);
				if(data.status == 0){
					//认证成功
					layer.msg("认证成功");
				}
			},"JSON");

		});

	});*/

	function binding(){
		//alert("正在认证")
		// window.location.href="index.html";
		var windowId = layer.load();//加载转圈
		var userPhone = $.trim($('#phone1').val());
		var code = $.trim($('#msg').val());//验证码
			var username = $("#name").val();
			var identifyCard = $("#identifyCard").val();
			var password = $("#password").val();
			//可以在这里就用ajax从服务端获取发送的短信验证码,并与输入的验证码是否一致,不一致就不能提交认证

			$.getJSON("/wx/userIdentification.do",{
				username:username,
				userPhone:userPhone,
				identifyCard:identifyCard,
				password:password,
				code:code
			},function (data) {
				layer.close(windowId);
				layer.msg(data.result);
				if(data.status == 0){
					//认证成功
					layer.msg("认证成功");
				}
				// if(data.status == 0 || data.status == 1){
				// 	//用户登录成功,
				//
				// }
			});

	}

	/*function blur() {

		$.getJSON("/wx/confirmationUserInformation.do", null, function (data) {
			if (data.status == 0) {
				$("#checkStateTxt").html("已认证");
				$('#phone1').val(data.data.userPhone);
				$("#name").val(data.data.username);
				$("#identifyCard").val(data.data.identifyCard);
				$("#password").val(data.data.password);
			}
		});
	}*/

	$(function () {
		$.getJSON("/wx/userInfo.do", null, function (data) {
			$("#checkStateTxt").text("");
			$("#checkBtn").text("");
			if (data.status == 0 || data.status == 1) {
				//$("#checkStateTxt").html("已认证");
				$("#checkStateTxt").text("已认证");
				$("#checkBtn").text("用户信息更改");
				$('#phone1').val(data.data.userPhone);
				$("#name").val(data.data.username);
				$("#identifyCard").val(data.data.identifyCard);
				$("#password").val(data.data.password);
			}
		});
	});


	$(function() {
		var pageContextVal = $("#PageContext").val();
		var wxCodeVal = $("#wxCode").val();
		var windowW = $(window).width();
		var windowH = $(window).height();
		if (windowW > 600) {
			windowW = 600;
		}
		
		var topH = $(".userCheckCont").height();
		$(".solidCont").css({"height":(windowH - topH) + "px"});
		$(".infoCheckEditCont").css({"height":(windowH - topH - 30) + "px"});
		
		// cover
		var contentH = $(".content").height();
		$(".imageCover").css({"height":contentH + "px"});

		// 样例图片展示  501*377
		var imageH = windowW * 377 / 501; 
		$(".coverCont").css({"margin-top":(windowH - imageH)/2 + "px"});

		$(".imageCover").click(function(){
			$(".imageCover").fadeOut();
		});
		
		$(".solidCont").css({"margin-left":0+"px"});

		$(".userRegBtn").click(function(){
			$(".solidCont").animate({"margin-left":-windowW+"px"},"fast");
		});

		$(".backBtn").click(function(){
			$(".solidCont").animate({"margin-left":0+"px"},"fast");
		});



		/*$("#userRegSubmitBtn").click(function () {
			var windowId = layer.load();
			var username = $("input:eq(0)").val();
			if (username === "") {
				layer.close(windowId);
				$("input:eq(0)").focus();
				layer.msg("昵称不能为空！");
			}
			var userPhone = $("input:eq(1)").val();
			var identifyCard = $("input:eq(2)").val();
			if (identifyCard === "") {
				layer.close(windowId);
				$("input:eq(2)").focus();
				layer.msg("身份证不能为空！");
			}
			var password = $("input:eq(3)").val();
			if (password === "") {
				layer.close(windowId);
				$("input:eq(3)").focus();
				layer.msg("密码不能为空！");
			}
			//var code = $.trim($('#msg').val());//验证码
			$.getJSON("/wx/userIdentification.do",{
				username:username,
				userPhone:userPhone,
				identifyCard:identifyCard,
				password:password,
				//code:code
			}, function (data) {
				layer.close(windowId);
				layer.msg(data.result);
				if (data.status === 0) {
					resetData();
					location.assign("index.html");
				}
			});
		});

		$("input:eq(0)").blur(function () {
			var str = $(this).val();
			if (str.trim() === "") {
				layer.msg("昵称不能为空！");
				$(this).focus();//选中
				$(this).select();//全选
				$("#userRegSubmitBtn").prop("disabled", true);
			}else {
				if (str.match(/^[\u4e00-\u9fff\w]{1,32}$/) === null) {
					layer.msg("昵称不合法！");
					$(this).focus();//选中
					$(this).select();//全选
					$("#userRegSubmitBtn").prop("disabled", true);
				}else {
					$("#userRegSubmitBtn").prop("disabled", false);
				}
			}
		});
		$("input:eq(2)").blur(function () {
			var str = $(this).val();
			if (str.trim() === "") {
				layer.msg("身份证号码不能为空！");
				$(this).focus();//选中input输入框
				$(this).select();//全选input输入框内输入内容
				$("#userRegSubmitBtn").prop("disabled", true);
			}else {
				if (str.match(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/) === null) {
					layer.msg("请输入正确的身份证号码！");
					$(this).focus();//选中input输入框
					$(this).select();//全选input输入框内输入内容
					$("#userRegSubmitBtn").prop("disabled", true);
				}else {
					$("#userRegSubmitBtn").prop("disabled", false);
				}
			}
		});
		$("input:eq(3)").blur(function () {
			var str = $(this).val();
			if (str.trim() === "") {
				layer.msg("密码不能为空！");
				$(this).focus();//选中input输入框
				$(this).select();//全选input输入框内输入内容
				$("#userRegSubmitBtn").prop("disabled", true);
			} else {
				if (str.match(/^.{6,32}$/) === null) {
					layer.msg("密码不合法！");
					$(this).focus();//选中input输入框
					$(this).select();//全选input输入框内输入内容
					$("#userRegSubmitBtn").prop("disabled", true);
				} else {
					$("#userRegSubmitBtn").prop("disabled", false);
				}
			}
		});*/
	});
</script>
</body>
</html>